<template>
  <div id="addMovie" style="width: 100%;height:calc(100vh - 40px);padding: 20px;overflow-y: auto">
    <el-form :model="movieForm">
      <div id="movieImg"><span v-if="!movieForm.movieImg">添加海报链接后显示</span><img v-if="movieForm.movieImg" :src="movieForm.movieImg" alt="" style="width: 100%;height: 100%"></div>
      <p>电影名</p>
      <input type="text" v-model="movieForm.movieName" class="input-100">
      <p>电影海报</p>
      <input type="text"  v-model="movieForm.movieImg" class="input-100">
      <p>电影英文名</p>
      <input type="text" v-model="movieForm.movieNameEn" class="input-100">
      <p>制作国家</p>
      <input type="text" v-model="movieForm.movieCountry" class="input-100">
      <p>标签</p>
      <input type="text" v-model="movieForm.movieGen" class="input-100">
    </el-form>
    <button class="button button-color-white" @click="addNewMovie">添加</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        movieForm:{
          movieName: '',
          movieNameEn:'',
          movieImg:'',
          movieGen:'',
          movieCountry:'',
        }
      }
    },
    methods:{
      async addNewMovie(){
        const {data:res} = await this.$axios.post('v1/addMovie',this.movieForm)
        if(res.code === 200){
          this.$message.success("添加成功")
        }
      }
    }


  }
</script>

<style lang="less" scoped>
  #addMovie{
    background-color: var(--theme-bgColor-aside-nav);
    p{
      margin-bottom: 5px;
      color: var(--theme-fontMain);
    }
    input{
      margin-bottom: 20px;
    }
    button{
      background-color: var(--theme-button);

      margin-top: 50px;
    }
    #movieImg{
      width: 170px;
      height: 238px;
      background-color: var(--theme-button);
      margin-bottom: 20px;
      display: grid;
      place-items: center;
      color: var(--theme-fontMain);
      border-radius: 6px;
      overflow: hidden;
    }
  }

</style>
